<template>
  <div>
    <TableVue ref="tableRef" @edit="edit" @create="create" :query="query" :table="table" />
    <FormVue :formData="form" @submit="reload" v-model="modalVisible" />
  </div>
</template>

<script setup lang="ts" name="skin">
import TableVue from "./components/Table.vue";

import { ISkin } from "@/api/service/skin";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";
import FormVue from "./components/Form.vue";

const tableRef = ref();
const form = ref<ISkin>();

const modalVisible = ref(false);
const query = useQuery<ISkin>({
  pageSize: 10,
  scope: ENUM_DATA_SCOPE.THIS_SHOP
});
const table = useTable<ISkin>({ rowKey: "skinId" });

const reload = () => {
  tableRef.value?.search();
};
const edit = (data: ISkin) => {
  form.value = data;
  if (typeof data.category === "string") {
    form.value.category = data.category.split(",");
  }

  modalVisible.value = true;
};

const create = () => {
  form.value = undefined;
  modalVisible.value = true;
};
</script>

<style lang="scss" scoped></style>
